<template>
    <a-card>
        <div>
            <a-form layout="horizontal">
                <div class="fold">
                    <a-row>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="标签" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="labelId" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="物料编码" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="itemCode" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="物料名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="itemDesc" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="订单号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="docNum" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="库位" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-input v-model="location" placeholder="请输入" allowClear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="出入库类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-select v-model="type">
                                    <a-select-option value="">请选择状态</a-select-option>
                                    <a-select-option :value="item.key" v-for="item in docTypeList" :key="item.key">
                                        {{ item.value }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <span style="float: right; margin-top: 3px">
                    <a-button type="primary" @click="query">查询</a-button>
                    <a-button @click="exportExcel" style="margin-left: 10px" :loading="logging">导出</a-button>
                </span>
            </a-form>
        </div>
        <div>
            <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="paginationChange"
                :scroll="{ y: 500 }" :rowKey="(dataSource) => dataSource.Id">
                <template slot="time" slot-scope="text, record">
                    {{ (record.UpdateTime ? record.UpdateTime : record.CreateTime) | dateTimeFormat }}
                </template>

                <template slot="type" slot-scope="text">
                    <a-tag :color="text === 'R-001' ? 'green' : text == 'R-002' ? 'red' : 'geekblue'">
                        {{ docTypeList.find(i => i.key == text).value }}
                    </a-tag>
                </template>
                <template slot="uploadStatus" slot-scope="text">
                    <a-tag :color="text ? 'green' : 'red'">
                        {{ text ? '同步成功' : '同步失败' }}
                    </a-tag>
                </template>
                <template slot="ellipsis" slot-scope="text">
                    <a-tooltip placement="bottom" :title="text">
                        {{ text.length > 20 ? text.substring(0, 20) + '...' : text }}
                    </a-tooltip>
                </template>
            </a-table>
        </div>
    </a-card>
</template>
  
<script>
import { inventoryService } from '/src/services'
import moment from 'moment'
import ExportJsonExcel from "js-export-excel"

const columns = [
    {
        title: '序号',
        width: 60,
        customRender: (text, record, index) => `${index + 1}`,
    },
    {
        title: '订单号',
        width: 130,
        dataIndex: 'DocNum'
    },
    {
        title: '标签',
        dataIndex: 'LabelId'
    },
    {
        title: '物料编码',
        width: 140,
        dataIndex: 'ItemCode'
    },
    {
        title: '物料名称',
        dataIndex: 'ItemName',
        scopedSlots: { customRender: 'ellipsis' }
    },
    {
        title: '数量',
        width: 70,
        dataIndex: 'Qty'
    },
    {
        title: '仓库',
        width: 65,
        dataIndex: 'WareCode'
    },
    {
        title: '库位',
        width: 100,
        dataIndex: 'Location'
    },
    {
        title: '类型',
        width: 80,
        dataIndex: 'Type',
        scopedSlots: { customRender: 'type' }
    },
    {
        title: '创建时间',
        width: 180,
        dataIndex: 'CreateTime',
        scopedSlots: { customRender: 'time' }
    },
]

export default {
    name: 'DataLogReport',
    filters: {
        dateTimeFormat(val) {
            if (val == null) return ''
            return val.replace('T', ' ').substring(0, 19)
        }
    },
    data() {
        return {
            advanced: false,
            columns: columns,
            dataSource: [],
            model: {},
            itemCode: '',
            labelId: '',
            itemDesc: '',
            docNum: '',
            location: '',
            type: '',
            docTypeList: [
                { key: 'R-001', value: '到货入库' },
                { key: 'R-002', value: '退料入库' },
                { key: 'C-001', value: '备料出库' },
                { key: 'C-002', value: '盘点' },
                { key: 'C-009', value: '手动出库' },
                { key: 'Y-001', value: '移库' },
                { key: 'S-001', value: '拆批作业' },
                { key: 'S-002', value: '拆批入库' },
                { key: 'S-003', value: '拆批出库' },
            ],
            date: moment(),
            pagination: {
                total: 0,
                current: 1,
                pageSize: 20,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
                showTotal: (total) => `总计 ${total} 条`,
                onChange: (current, pageSize) => {
                    this.pagination.pageSize = pageSize
                    this.pagination.current = current
                    this.loadData()
                }
            },
            logging: false,
        }
    },
    mounted: function () {
        this.loadData()
    },
    methods: {
        async paginationChange(pagination) {
            this.pagination.pageSize = pagination.pageSize
            this.pagination.current = pagination.current
            this.loadData()
        },
        async loadData() {
            var result = await inventoryService.getInventoryLog(this.itemCode, this.labelId, this.itemDesc, this.docNum, this.location, this.type, this.pagination.pageSize, this.pagination.current)
            if (result && result.data) {
                this.dataSource = result.data.data
                this.pagination.total = result.data.total
            }
        },
        query() {
            this.pagination.current = 1
            this.loadData()
        },
        async exportExcel() {
            this.logging = true;
            var result = await inventoryService.getInventoryLog(this.itemCode, this.labelId, this.itemDesc, this.docNum, this.location, this.type, 10000, 1)

            if (result && result.data) {
                var option = {};
                let dataTable = [];
                let datas = result.data.data;

                datas.forEach(item => {
                    item.CreateTime = (item.UpdateTime ? item.UpdateTime : item.CreateTime).replace('T', ' ').substring(0, 19)
                    item.Type = this.docTypeList.find(i => i.key == item.Type).value;
                    dataTable.push(item);
                });
                var sheetFilter = [];
                var sheetHeader = [];
                columns.forEach(item => {
                    if (item.title !== "序号" && item.title !== "操作") {
                        sheetFilter.push(item.dataIndex)
                        sheetHeader.push(item.title)
                    }
                })
                option.fileName = this.$route.name + '_' + moment().format('YYYY-MM-DD');
                option.datas = [
                    {
                        sheetData: dataTable,
                        sheetName: 'sheet',
                        sheetFilter: sheetFilter,
                        sheetHeader: sheetHeader,
                    }
                ];
                var toExcel = new ExportJsonExcel(option);
                toExcel.saveExcel();
                this.logging = false;
            }

        }
    }
}
</script>
  
<style lang="less">
.fold {
    width: calc(100% - 216px);
    display: inline-block;
}

.ant-input-number-handler-wrap {
    display: none
}

.ant-table-tbody .ant-table-row-cell-break-word {
    word-break: break-all;
}
</style>
  
  